<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"
      th:replace="~{fragments/layout :: layout(~{::title}, ~{::section})}">
<head>
    <title th:text="#{topics.title}">Topics - SnackMQ Console</title>
</head>
<body>
<section>
    <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom gap-2">
        <h4 class="h4 mb-0" th:text="#{topics.management}">Topic Management</h4>
        <div class="d-flex align-items-center gap-2">
            <!-- 实时更新状态指示器 -->
            <div id="refresh-status" class="text-muted small me-3">
                <span class="spinner-grow spinner-grow-sm text-success" role="status" aria-hidden="true"></span>
                <span th:text="#{dashboard.live.update}">Live Update</span>
            </div>
            <button type="button" class="btn btn-sm btn-primary" data-bs-toggle="modal" data-bs-target="#createTopicModal" th:text="#{topics.create.topic}">
                Create Topic
            </button>
        </div>
    </div>

    <div class="table-responsive">
        <table class="table table-striped table-hover shadow-sm border-0 rounded">
            <thead class="table-dark">
            <tr>
                <th th:text="#{topics.topic.name}">Topic Name</th>
                <th th:text="#{topics.partition.count}">Partitions</th>
                <th th:text="#{topics.replication.factor}">Replication Factor</th>
                <th th:text="#{topics.actions}">Actions</th>
            </tr>
            </thead>
            <!-- 为 tbody 增加 id -->
            <tbody id="topic-table-body">
            <tr th:each="topic : ${topics}">
                <td><a th:href="@{'/topics/' + ${topic.topicName}}" th:text="${topic.topicName}"></a></td>
                <td th:text="${topic.partitionCount}"></td>
                <td th:text="${topic.replicationFactor}"></td>
                <td>
                    <!-- Placeholder for future actions like 'delete' or 'details' -->
                    <form th:action="@{/topics/delete}" method="post" class="d-inline"
                          th:onsubmit="'return confirm(\'' + #{topics.confirm.delete} + '\');'">
                        <input type="hidden" name="topicName" th:value="${topic.topicName}"/>
                        <button type="submit" class="btn btn-danger btn-sm py-0 px-2" th:text="#{common.delete}">Delete</button>
                    </form>
                    <!-- 【修复】启用 Details 按钮，并将其链接到正确的 Topic 详情页 -->
                    <a th:href="@{'/topics/' + ${topic.topicName}}" class="btn btn-info btn-sm py-0 px-2 ms-1" th:text="#{topics.view.details}">Details</a>
                </td>
            </tr>
            <tr th:if="${#lists.isEmpty(topics)}">
                <td colspan="4" class="text-center" th:text="#{topics.no.topics.found}">No topics found.</td>
            </tr>
            </tbody>
        </table>
    </div>

    <!-- Create Topic Modal -->
    <div class="modal fade" id="createTopicModal" tabindex="-1" aria-labelledby="createTopicModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <form th:action="@{/topics/create}" method="post">
                    <div class="modal-header">
                        <h5 class="modal-title" id="createTopicModalLabel" th:text="#{topics.create.new.topic}">Create a New Topic</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <div class="mb-3">
                            <label for="topicName" class="form-label" th:text="#{topics.topic.name}">Topic Name</label>
                            <input type="text" class="form-control" id="topicName" name="topicName" required>
                        </div>
                        <div class="mb-3">
                            <label for="partitions" class="form-label" th:text="#{topics.number.of.partitions}">Number of Partitions</label>
                            <input type="number" class="form-control" id="partitions" name="partitions" value="1" min="1" required>
                        </div>
                        <div class="mb-3">
                            <label for="replicationFactor" class="form-label" th:text="#{topics.replication.factor}">Replication Factor</label>
                            <input type="number" class="form-control" id="replicationFactor" name="replicationFactor" value="1" min="1" required>
                            <div class="form-text" th:text="#{topics.replication.factor.help}">
                                Must not be greater than the number of available brokers.
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" th:text="#{common.cancel}">Close</button>
                        <button type="submit" class="btn btn-primary" th:text="#{topics.create.topic}">Create Topic</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <!-- 国际化文本数据，供JavaScript使用 -->
    <div id="i18n-data" style="display: none;">
        <span data-i18n="topics.no.topics.found" th:text="#{topics.no.topics.found}">No topics found.</span>
        <span data-i18n="topics.confirm.delete" th:text="#{topics.confirm.delete}">Confirm delete topic?</span>
        <span data-i18n="common.delete" th:text="#{common.delete}">Delete</span>
        <span data-i18n="topics.view.details" th:text="#{topics.view.details}">View Details</span>
        <span data-i18n="dashboard.live.update" th:text="#{dashboard.live.update}">Live Update</span>
        <span data-i18n="topics.update.failed" th:text="#{topics.update.failed}">Update Failed</span>
    </div>
    
    <th:block th:replace="~{fragments/js/topics-js}"></th:block>
</section>
</body>
</html>